<!DOCTYPE HTML>
<html lang="zh-CN">
<head>
    

<head><meta name="generator" content="Hexo 3.8.0">
    <meta charset="utf-8">
    <meta name="keywords" content="HelloJs, 炫杉">
    <meta name="description" content="高铁上没事干，入门一波Js。

Tips
分号；可选
标识符以字母、下划线和美元符号开始
大小写敏感

GrammarVarvar a = 10 声明变量
docunment.write(a) 输出
赋值为null可清除变量

点击运算

">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="renderer" content="webkit|ie-stand|ie-comp">
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
    <title>HelloJs | 炫杉</title>
    <link rel="icon" type="image/png" href="/favicon.png">

    <link rel="stylesheet" type="text/css" href="/libs/awesome/css/font-awesome.min.css">
    <link rel="stylesheet" type="text/css" href="/libs/materialize/css/materialize.min.css">
    <link rel="stylesheet" type="text/css" href="/libs/aos/aos.css">
    <link rel="stylesheet" type="text/css" href="/libs/animate/animate.min.css">
    <link rel="stylesheet" type="text/css" href="/libs/lightGallery/css/lightgallery.min.css">
    <link rel="stylesheet" type="text/css" href="/css/matery.css">
    <link rel="stylesheet" type="text/css" href="/css/my.css">

    <script src="/libs/jquery/jquery-2.2.0.min.js"></script>
<link rel="stylesheet" href="/css/prism-tomorrow.css" type="text/css">
<link rel="stylesheet" href="/css/prism-line-numbers.css" type="text/css"></head>

</head>

<body>

<header class="navbar-fixed">
    <nav id="headNav" class="bg-color nav-transparent">
        <div id="navContainer" class="container">
            <div class="nav-wrapper">
                <div class="brand-logo">
                    <a href="/" class="waves-effect waves-light">
                        
                        <img src="/medias/logo.png" class="logo-img hide-on-small-only">
                        
                        <span class="logo-span">炫杉</span>
                    </a>
                </div>
                <a href="#" data-activates="mobile-nav" class="button-collapse"><i class="fa fa-navicon"></i></a>
<ul class="right">
    
    <li class="hide-on-med-and-down">
        <a href="/" class="waves-effect waves-light">
            
            <i class="fa fa-home"></i>
            
            <span>Index</span>
        </a>
    </li>
    
    <li class="hide-on-med-and-down">
        <a href="/tags" class="waves-effect waves-light">
            
            <i class="fa fa-tags"></i>
            
            <span>Tags</span>
        </a>
    </li>
    
    <li class="hide-on-med-and-down">
        <a href="/categories" class="waves-effect waves-light">
            
            <i class="fa fa-bookmark"></i>
            
            <span>Categories</span>
        </a>
    </li>
    
    <li class="hide-on-med-and-down">
        <a href="/archives" class="waves-effect waves-light">
            
            <i class="fa fa-archive"></i>
            
            <span>Archives</span>
        </a>
    </li>
    
    <li class="hide-on-med-and-down">
        <a href="/about" class="waves-effect waves-light">
            
            <i class="fa fa-user-circle-o"></i>
            
            <span>About</span>
        </a>
    </li>
    
    <li class="hide-on-med-and-down">
        <a href="https://oo1.win" class="waves-effect waves-light">
            
            <i class="fa fa-star"></i>
            
            <span>Bookmark</span>
        </a>
    </li>
    
    <li>
        <a id="toggleSearch" class="waves-effect waves-light">
            <i id="searchIcon" class="mdi-action-search"></i>
        </a>
    </li>

</ul>

<div class="side-nav" id="mobile-nav">

    <div class="mobile-head bg-color">
        
        <img src="/medias/logo.png" class="logo-img circle responsive-img">
        
        <div class="logo-name">炫杉</div>
        <div class="logo-desc">
            
            提着鸟笼的老头站在一旁拍我肩膀 我猜他想的应该和我一样
            
        </div>
    </div>

    <ul class="menu-list mobile-menu-list">
        
        <li>
            <a href="/" class="waves-effect waves-light">
                
                <i class="fa fa-fw fa-home"></i>
                
                Index
            </a>
        </li>
        
        <li>
            <a href="/tags" class="waves-effect waves-light">
                
                <i class="fa fa-fw fa-tags"></i>
                
                Tags
            </a>
        </li>
        
        <li>
            <a href="/categories" class="waves-effect waves-light">
                
                <i class="fa fa-fw fa-bookmark"></i>
                
                Categories
            </a>
        </li>
        
        <li>
            <a href="/archives" class="waves-effect waves-light">
                
                <i class="fa fa-fw fa-archive"></i>
                
                Archives
            </a>
        </li>
        
        <li>
            <a href="/about" class="waves-effect waves-light">
                
                <i class="fa fa-fw fa-user-circle-o"></i>
                
                About
            </a>
        </li>
        
        <li>
            <a href="https://oo1.win" class="waves-effect waves-light">
                
                <i class="fa fa-fw fa-star"></i>
                
                Bookmark
            </a>
        </li>
        
        
    </ul>

    <div class="social-link"><a href="https://github.com/ixsim" class="tooltipped" target="_blank" data-tooltip="访问我的GitHub" data-position="top" data-delay="50">
    <i class="fa fa-github"></i>
</a>

<a href="mailto:chenjiayin1990@163.com" class="tooltipped" target="_blank" data-tooltip="邮件:chinalixs@qq.com" data-position="top" data-delay="50">
    <i class="fa fa-envelope-open"></i>
</a>

<a href="http://wpa.qq.com/msgrd?v=3&uin=6956820&site=qq&menu=yes" class="tooltipped" data-tooltip="QQ: 6956820" data-position="top" data-delay="50">
    <i class="fa fa-qq"></i>
</a>
</div>
</div>

            </div>
        </div>

        
    </nav>
</header>



<div class="bg-cover post-cover" style="background-image: url('/medias/featureimages/5.jpg')">
    <div class="container">
        <div class="row">
            <div class="col s12 m12 l12">
                <div class="brand">
                    <div class="description center-align post-title">
                        HelloJs
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>



<main class="post-container content">

    
    <link rel="stylesheet" href="/libs/tocbot/tocbot.css">
<style>
    #articleContent h1,
    #articleContent h2,
    #articleContent h3,
    #articleContent h4,
    #articleContent h5,
    #articleContent h6 {
        padding-top: 76px;
        margin-top: -76px;
    }

    #articleContent h1 {
        line-height: 3.5rem;
    }

    #articleContent h2 {
        line-height: 3.2rem;
    }

    #articleContent h3 {
        line-height: 2.8rem;
    }

    #articleContent h4 {
        line-height: 2.5rem;
    }

    #articleContent h5 {
        line-height: 2.2rem;
    }

    #articleContent h6 {
        line-height: 1.9rem;
    }

    #articleContent :focus {
        outline: none;
    }

    .toc-fixed {
        position: fixed;
        top: 64px;
    }

    .toc-widget {
        padding-left: 20px;
    }

    .toc-widget .toc-title {
        margin: 35px 0 15px 0;
        padding-left: 17px;
        font-size: 1.5rem;
        font-weight: bold;
        line-height: 1.5rem;
    }

    .toc-widget ol {
        padding: 0;
        list-style: none;
    }

    #toc-content ol {
        padding-left: 10px;
    }

    #toc-content ol li {
        padding-left: 10px;
    }

    #toc-content .toc-link:hover {
        color: #42b983;
        font-weight: 700;
        text-decoration: underline;
    }

    #toc-content .toc-link::before {
        background-color: transparent;
        max-height: 25px;
    }

    #toc-content .is-active-link {
        color: #42b983;
    }

    #toc-content .is-active-link::before {
        background-color: #42b983;
    }
</style>
<div class="row">
    <div class="col s12 m12 l9">
        <!-- 文章内容详情 -->
<div id="artDetail">
    <div class="card">
        <div class="card-content article-info">
            
            <div class="article-tag">
                
                <a href="/tags/Note/" target="_blank">
                    <span class="chip bg-color">Note</span>
                </a>
                
                <a href="/tags/js/" target="_blank">
                    <span class="chip bg-color">js</span>
                </a>
                
            </div>
            
            <div class="post-info">
                
                <span class="post-cate">
                    <i class="fa fa-bookmark fa-fw icon-category"></i>
                    
                    <a href="/categories/Website/" class="post-category" target="_blank">
                        Website
                    </a>
                    
                </span>
                

                <span class="post-date">
                    <i class="fa fa-clock-o fa-fw"></i>2018-08-14
                </span>
            </div>
        </div>
        <hr>
        <div class="card-content article-card-content">
            <div id="articleContent">
                <p>高铁上没事干，入门一波Js。</p>
<a id="more"></a>
<h1 id="Tips"><a href="#Tips" class="headerlink" title="Tips"></a>Tips</h1><ul>
<li>分号<code>；</code>可选</li>
<li>标识符以字母、下划线和美元符号开始</li>
<li>大小写敏感</li>
</ul>
<h1 id="Grammar"><a href="#Grammar" class="headerlink" title="Grammar"></a>Grammar</h1><h2 id="Var"><a href="#Var" class="headerlink" title="Var"></a>Var</h2><p><code>var a = 10</code> 声明变量</p>
<p><code>docunment.write(a)</code> 输出</p>
<p>赋值为null可清除变量</p>
<ul>
<li>点击运算</li>
</ul>
<pre class="line-numbers language-html"><code class="language-html">&lt;p id = "sumid"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name">onclick</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>mysum()<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>结果<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">></span></span><span class="token script language-javascript">
<span class="token keyword">function</span> <span class="token function">mysum</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    <span class="token keyword">var</span> i <span class="token operator">=</span> <span class="token number">10</span><span class="token punctuation">;</span>
    <span class="token keyword">var</span> j <span class="token operator">=</span> <span class="token number">10</span><span class="token punctuation">;</span>
    <span class="token keyword">var</span> m <span class="token operator">=</span> i <span class="token operator">+</span> j<span class="token punctuation">;</span>
    document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">"sumid"</span><span class="token punctuation">)</span><span class="token punctuation">.</span>innerHTML <span class="token operator">=</span> m<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">></span></span>
<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>
<h2 id="Operator"><a href="#Operator" class="headerlink" title="Operator"></a>Operator</h2><p><code>+ - x / % ++ --</code></p>
<p><code>= += -= *= /= %=</code></p>
<p><code>== === != &lt; &gt; &lt;= &gt;=</code></p>
<p><code>&amp;&amp; || !</code></p>
<p><code>?:</code>三目</p>
<ul>
<li>任何类型和字符串运算都会被转成字符串类型</li>
</ul>
<p>这就是<code>==</code>和<code>===</code>的区别：</p>
<pre><code>&quot;5&quot;==5?
true
&quot;5&quot;===5?
false
</code></pre><h2 id="Condition"><a href="#Condition" class="headerlink" title="Condition"></a>Condition</h2><p><code>if else</code></p>
<pre><code>switch(i){
case 1: break;
case 2: break;
default: break;
}
</code></pre><h2 id="Loop"><a href="#Loop" class="headerlink" title="Loop"></a>Loop</h2><p><code>for(;;){}</code>和C中一样</p>
<p><code>for (j in i)</code></p>
<p><code>while</code> <code>do while</code></p>
<h1 id="Function"><a href="#Function" class="headerlink" title="Function"></a>Function</h1><h2 id="调用"><a href="#调用" class="headerlink" title="调用"></a>调用</h2><ul>
<li>在<code>&lt;script&gt;</code>中</li>
<li>在Html中</li>
</ul>
<h1 id="异常捕获"><a href="#异常捕获" class="headerlink" title="异常捕获"></a>异常捕获</h1><pre><code>try{
    //此处插入测试代码块
}catch(err){
    //发生错误会触发下面的代码
    alert(err);
}
</code></pre><h1 id="事件"><a href="#事件" class="headerlink" title="事件"></a>事件</h1><h2 id="常用"><a href="#常用" class="headerlink" title="常用"></a>常用</h2><table>
<thead>
<tr>
<th style="text-align:left">事件</th>
<th style="text-align:left">描述</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:left">onClick</td>
<td style="text-align:left">单击</td>
</tr>
<tr>
<td style="text-align:left">onMouseOver</td>
<td style="text-align:left">鼠标经过</td>
</tr>
<tr>
<td style="text-align:left">onMouseOut</td>
<td style="text-align:left">鼠标移出</td>
</tr>
<tr>
<td style="text-align:left">onChange</td>
<td style="text-align:left">文本内容改变</td>
</tr>
<tr>
<td style="text-align:left">onSelect</td>
<td style="text-align:left">文本框选中</td>
</tr>
<tr>
<td style="text-align:left">onFocus</td>
<td style="text-align:left">光标聚集</td>
</tr>
<tr>
<td style="text-align:left">onBlur</td>
<td style="text-align:left">移开光标</td>
</tr>
<tr>
<td style="text-align:left">onLoad</td>
<td style="text-align:left">网页加载</td>
</tr>
<tr>
<td style="text-align:left">onUnload</td>
<td style="text-align:left">网页关闭</td>
</tr>
</tbody>
</table>
<h2 id="例子"><a href="#例子" class="headerlink" title="例子"></a>例子</h2><pre class="line-numbers language-javascript"><code class="language-javascript"><span class="token operator">&lt;</span>html<span class="token operator">></span>
<span class="token operator">&lt;</span>head<span class="token operator">></span>
    <span class="token operator">&lt;</span>title<span class="token operator">></span>事件<span class="token operator">&lt;</span><span class="token operator">/</span>title<span class="token operator">></span>
    <span class="token operator">&lt;</span>link rel<span class="token operator">=</span><span class="token string">"stylesheet"</span> type<span class="token operator">=</span><span class="token string">"text/css"</span> href<span class="token operator">=</span><span class="token string">"style.css"</span><span class="token operator">></span>
<span class="token operator">&lt;</span><span class="token operator">/</span>head<span class="token operator">></span>
<span class="token comment" spellcheck="true">//注意传递的 this</span>
    <span class="token operator">&lt;</span>div <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"div"</span> onmouseout<span class="token operator">=</span><span class="token string">"onOut(this)"</span> onmouseover<span class="token operator">=</span><span class="token string">"onOver(this)"</span><span class="token operator">></span>    
    <span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">></span>

    <span class="token operator">&lt;</span>script type<span class="token operator">=</span><span class="token string">"text/javascript"</span><span class="token operator">></span>
        <span class="token keyword">function</span> <span class="token function">onOver</span><span class="token punctuation">(</span>ooj<span class="token punctuation">)</span><span class="token punctuation">{</span>
            ooj<span class="token punctuation">.</span>innerHTML <span class="token operator">=</span> <span class="token string">"Hello"</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span>
        <span class="token keyword">function</span> <span class="token function">onOut</span><span class="token punctuation">(</span>ooj<span class="token punctuation">)</span><span class="token punctuation">{</span>
            ooj<span class="token punctuation">.</span>innerHTML <span class="token operator">=</span> <span class="token string">"World"</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span>
    <span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">></span>
<span class="token operator">&lt;</span><span class="token operator">/</span>html<span class="token operator">></span>
<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>
<h1 id="DOM"><a href="#DOM" class="headerlink" title="DOM"></a>DOM</h1><p>网页被加载时，浏览器会创建页面的文档对象模型(Docunment Object Model)</p>
<h2 id="DOM操作HTML"><a href="#DOM操作HTML" class="headerlink" title="DOM操作HTML"></a>DOM操作HTML</h2><ul>
<li><p>改变HTML输出流<br>  <code>document.write()</code></p>
<blockquote>
<p>注意不要在文档加载完成之后使用，会覆盖文档。</p>
</blockquote>
</li>
<li>寻找元素<ul>
<li>通过id</li>
</ul>
</li>
</ul>
<pre class="line-numbers language-javascript"><code class="language-javascript"><span class="token operator">&lt;</span>script<span class="token operator">></span>
    <span class="token keyword">function</span> <span class="token function">demo</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
        <span class="token keyword">var</span> a <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">"pid"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
<span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">></span>
<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span></span></code></pre>
<ul>
<li><p>通过标签名ByTagName···</p>
<p>  返回的是一个数组</p>
</li>
<li><p>改变内容</p>
</li>
</ul>
<pre class="line-numbers language-javascript"><code class="language-javascript"><span class="token operator">&lt;</span>script<span class="token operator">></span>
    <span class="token keyword">function</span> <span class="token function">demo</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
        <span class="token keyword">var</span> a <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">"pid"</span><span class="token punctuation">)</span><span class="token punctuation">.</span>innerHTML<span class="token operator">=</span><span class="token string">"Changed"</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
<span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">></span>
<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span></span></code></pre>
<ul>
<li>改变属性</li>
</ul>
<pre class="line-numbers language-javascript"><code class="language-javascript"><span class="token operator">&lt;</span>script<span class="token operator">></span>
<span class="token keyword">function</span> <span class="token function">demo</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
<span class="token keyword">var</span> a <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">"aid"</span><span class="token punctuation">)</span><span class="token punctuation">.</span>href<span class="token operator">=</span><span class="token string">"http://oo1.win"</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">></span>   
<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span></span></code></pre>
<ul>
<li><code>removeChild() insertBefore()</code>添加删除子节点</li>
</ul>
<h2 id="DOM操作CSS"><a href="#DOM操作CSS" class="headerlink" title="DOM操作CSS"></a>DOM操作CSS</h2><pre class="line-numbers language-javascript"><code class="language-javascript"><span class="token operator">&lt;</span>button onclick<span class="token operator">=</span><span class="token string">"demo()"</span><span class="token operator">></span>按钮<span class="token operator">&lt;</span><span class="token operator">/</span>button<span class="token operator">></span>
<span class="token operator">&lt;</span>script<span class="token operator">></span>
    <span class="token keyword">function</span> <span class="token function">demo</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">"pid"</span><span class="token punctuation">)</span><span class="token punctuation">.</span>style<span class="token punctuation">.</span>background<span class="token operator">=</span><span class="token string">"blue"</span><span class="token punctuation">;</span><span class="token punctuation">}</span>
<span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">></span>
<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span></span></code></pre>
<h2 id="DOM-EventListerner"><a href="#DOM-EventListerner" class="headerlink" title="DOM EventListerner"></a>DOM EventListerner</h2><p>事件句柄</p>
<ul>
<li>方法：</li>
<li><ul>
<li><p><code>addEventListener()</code></p>
<p>向指定元素添加事件句柄</p>
<pre class="line-numbers language-javascript"><code class="language-javascript"><span class="token operator">&lt;</span>script<span class="token operator">></span>
document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">"btn"</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">"click"</span><span class="token punctuation">,</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    <span class="token function">alert</span><span class="token punctuation">(</span><span class="token string">"hello"</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">></span>
<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span></span></code></pre>
<p>这样就不需要写一个函数，再从button的属性中更改<code>onclick=&quot;xxx()&quot;</code></p>
</li>
</ul>
</li>
</ul>
<blockquote>
<p>添加多个句柄<strong>不会覆盖</strong></p>
</blockquote>
<pre class="line-numbers language-javascript"><code class="language-javascript"><span class="token operator">&lt;</span>script<span class="token operator">></span>
    x <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">"btn"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    x<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">"click"</span><span class="token punctuation">,</span>func1<span class="token punctuation">)</span><span class="token punctuation">;</span>
    x<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">"click"</span><span class="token punctuation">,</span>func2<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token function">func1</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span><span class="token function">alert</span><span class="token punctuation">(</span><span class="token string">"hello"</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token punctuation">}</span>
    <span class="token function">func2</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span><span class="token function">alert</span><span class="token punctuation">(</span><span class="token string">"world"</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token punctuation">}</span>
<span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">></span>
<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>
<ul>
<li><ul>
<li><code>removeEventListener()</code></li>
</ul>
</li>
</ul>
<p>移除方法添加的事件句柄</p>
<p><code>x.removeEventListener(&quot;click&quot;,func2);</code></p>
<h1 id="事件详解"><a href="#事件详解" class="headerlink" title="事件详解"></a>事件详解</h1><h2 id="事件流"><a href="#事件流" class="headerlink" title="事件流"></a>事件流</h2><ul>
<li><p>事件冒泡</p>
<p>  由最具体的元素接收，然后逐级冒泡至最不具体的元素的节点。</p>
</li>
<li><p>事件捕获</p>
<p>  由最不具体的.</p>
</li>
</ul>
<h2 id="事件处理"><a href="#事件处理" class="headerlink" title="事件处理"></a>事件处理</h2><ul>
<li><p>HTML事件处理</p>
<p>  直接添加到HTML结构中</p>
</li>
<li><p>DOM 0级事件处理</p>
<pre class="line-numbers language-javascript"><code class="language-javascript">  <span class="token keyword">var</span> x <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">"btn1"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  btn1<span class="token punctuation">.</span>onclick <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>xxx<span class="token punctuation">;</span><span class="token punctuation">}</span>
<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span></span></code></pre>
<blockquote>
<p>这种事件处理<strong>会被覆盖</strong></p>
</blockquote>
</li>
<li><p>DOM 2级事件处理</p>
<ul>
<li><p>即<code>addEventListener(&quot;事件名”,“事件处理函数”,“布尔值&quot;);</code><br>true: 事件捕获、<br>false: 事件冒泡</p>
<p>？？？：缺省值是true还是false？</p>
</li>
</ul>
</li>
<li><p>IE 事件处理程序</p>
</li>
</ul>
<h2 id="事件对象"><a href="#事件对象" class="headerlink" title="事件对象"></a>事件对象</h2><ol>
<li><p>事件对象</p>
<p> 在触发DOM事件的时候都会产生一个对象 </p>
</li>
<li><p>事件对象event</p>
<ol>
<li>type: 获取事件类型</li>
<li>target: 获取事件目标</li>
<li>stopPropagation(): 阻止事件冒泡</li>
<li>preventDefault(): 阻止事件默认行为</li>
</ol>
<ul>
<li>例子</li>
</ul>
</li>
</ol>
<pre class="line-numbers language-javascript"><code class="language-javascript"><span class="token operator">&lt;</span>script<span class="token operator">></span>
document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">"btn1"</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">"click"</span><span class="token punctuation">,</span>showType<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">function</span> <span class="token function">showtype</span><span class="token punctuation">(</span>event<span class="token punctuation">)</span><span class="token punctuation">{</span>
    <span class="token function">alert</span><span class="token punctuation">(</span>event<span class="token punctuation">.</span>type<span class="token punctuation">)</span><span class="token punctuation">;</span>
    event<span class="token punctuation">.</span><span class="token function">stopPropagation</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token comment" spellcheck="true">//阻止事件冒泡 就是上一级不再响应了。比如在button上一级的div中也有一个click点击事件。不阻止就也会执行。</span>
    <span class="token comment" spellcheck="true">//阻止事件行为就是啥也不干了。比如a标签不跳转了。</span>
<span class="token punctuation">}</span>
<span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">></span>
<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>
<h1 id="内置对象"><a href="#内置对象" class="headerlink" title="内置对象"></a>内置对象</h1><ol>
<li>什么是对象：字符串、数组、数值、函数.所有事物都是对象。每个对象都有属性和方法。</li>
<li>自定义对象</li>
</ol>
<ul>
<li>定义并创建对象实例例子</li>
</ul>
<pre class="line-numbers language-javascript"><code class="language-javascript"><span class="token operator">&lt;</span>script<span class="token operator">></span>
    people <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Object</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    people<span class="token punctuation">.</span>name <span class="token operator">=</span> <span class="token string">"xy"</span><span class="token punctuation">;</span>
    people<span class="token punctuation">.</span>age <span class="token operator">=</span> <span class="token number">30</span><span class="token punctuation">;</span>
    <span class="token comment" spellcheck="true">//或</span>
    <span class="token comment" spellcheck="true">//people = {name:"xy",age:"30"};</span>

document<span class="token punctuation">.</span><span class="token function">write</span><span class="token punctuation">(</span><span class="token string">"name:"</span><span class="token operator">+</span>people<span class="token punctuation">.</span>name<span class="token operator">+</span><span class="token string">",age:"</span><span class="token operator">+</span>people<span class="token punctuation">.</span>age<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">></span>
<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>
<ul>
<li>使用函数定义对象，然后创建对象实例</li>
</ul>
<p>例子</p>
<pre class="line-numbers language-javascript"><code class="language-javascript"><span class="token operator">&lt;</span>script<span class="token operator">></span>
    <span class="token keyword">function</span> <span class="token function">people</span><span class="token punctuation">(</span>name<span class="token punctuation">,</span>age<span class="token punctuation">)</span><span class="token punctuation">{</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>name <span class="token operator">=</span> name<span class="token punctuation">;</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>age <span class="token operator">=</span> age<span class="token punctuation">;</span>
    <span class="token punctuation">}</span>

document<span class="token punctuation">.</span><span class="token function">write</span><span class="token punctuation">(</span><span class="token string">"name:"</span><span class="token operator">+</span>people<span class="token punctuation">.</span>name<span class="token operator">+</span><span class="token string">",age:"</span><span class="token operator">+</span>people<span class="token punctuation">.</span>age<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">></span>
<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>
<h2 id="String字符串对象"><a href="#String字符串对象" class="headerlink" title="String字符串对象"></a>String字符串对象</h2><p>方法：</p>
<ul>
<li>字符串中查找字符串 <code>indexOf()</code><br>有则返回位置。无则返回-1</li>
<li>匹配内容 <code>match()</code></li>
<li>替换内容 <code>replace()</code></li>
<li>字符串大小写转换 <code>toUpperCase()`</code>toLowerCase()`</li>
<li>字符串转为数组 <code>strong&gt;split()</code></li>
</ul>
<p>剩下的查文档吧。</p>
<h2 id="Date日期对象"><a href="#Date日期对象" class="headerlink" title="Date日期对象"></a>Date日期对象</h2><ul>
<li>获取当前Date</li>
</ul>
<pre class="line-numbers language-javascript"><code class="language-javascript"><span class="token operator">&lt;</span>script<span class="token operator">></span>
    <span class="token keyword">var</span> date <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">date</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    document<span class="token punctuation">.</span><span class="token function">write</span><span class="token punctuation">(</span>date<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">></span>
<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span></span></code></pre>
<ul>
<li>常用方法<ul>
<li><code>getFullyear()</code> 获取年份</li>
<li><code>gettime()</code> 获取毫秒</li>
<li><code>setFullyear()</code> 设置具体的日期变量赋值</li>
<li><code>getDay</code> 获取星期</li>
</ul>
</li>
</ul>
<p>例子</p>
<pre class="line-numbers language-javascript"><code class="language-javascript"><span class="token operator">&lt;</span>script<span class="token operator">></span>
<span class="token function">starttime</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">function</span> <span class="token function">starttime</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    <span class="token keyword">var</span> today <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">var</span> h <span class="token operator">=</span> today<span class="token punctuation">.</span><span class="token function">getHours</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">var</span> m <span class="token operator">=</span> today<span class="token punctuation">.</span><span class="token function">getMinutes</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">var</span> s <span class="token operator">=</span> today<span class="token punctuation">.</span><span class="token function">getSeconds</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

    m <span class="token operator">=</span> <span class="token function">checktime</span><span class="token punctuation">(</span>m<span class="token punctuation">)</span><span class="token punctuation">;</span>
    s <span class="token operator">=</span> <span class="token function">checktime</span><span class="token punctuation">(</span>s<span class="token punctuation">)</span><span class="token punctuation">;</span>
    document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">"timetxt"</span><span class="token punctuation">)</span><span class="token punctuation">.</span>innerHTML <span class="token operator">=</span> h<span class="token operator">+</span><span class="token string">"-"</span><span class="token operator">+</span>m<span class="token operator">+</span><span class="token string">"-"</span><span class="token operator">+</span>s<span class="token punctuation">;</span>
    t <span class="token operator">=</span> <span class="token function">settimeout</span><span class="token punctuation">(</span>func<span class="token punctuation">,</span><span class="token number">1000</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token keyword">function</span> <span class="token function">checktime</span><span class="token punctuation">(</span>i<span class="token punctuation">)</span><span class="token punctuation">{</span>
    <span class="token keyword">if</span><span class="token punctuation">(</span>i<span class="token operator">&lt;</span><span class="token number">10</span><span class="token punctuation">)</span><span class="token punctuation">{</span>i <span class="token operator">=</span> <span class="token string">"0"</span><span class="token operator">+</span>i<span class="token punctuation">;</span><span class="token punctuation">}</span>
    <span class="token keyword">return</span> i<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token keyword">function</span> <span class="token function">func</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    <span class="token function">starttime</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span>
<span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">></span>
<span class="token operator">&lt;</span>div id <span class="token operator">=</span> <span class="token string">"timetxt"</span><span class="token operator">></span>
<span class="token operator">&lt;</span>script<span class="token operator">></span><span class="token function">starttime</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">></span>
<span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">></span>
<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>
<h2 id="数组"><a href="#数组" class="headerlink" title="数组"></a>数组</h2><p>常用方法</p>
<ul>
<li><code>a.concat(b)</code> 合并数组a+b</li>
<li><code>sort()</code> 排序</li>
<li><code>push()</code> 末尾加元素</li>
<li><code>reverse()</code> 翻转<br>.<br>降序排列：</li>
</ul>
<pre class="line-numbers language-javascript"><code class="language-javascript"><span class="token operator">&lt;</span>script<span class="token operator">></span>
<span class="token keyword">var</span> a <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">5</span><span class="token punctuation">,</span><span class="token number">2</span><span class="token punctuation">,</span><span class="token number">4</span><span class="token punctuation">,</span><span class="token number">1</span><span class="token punctuation">,</span><span class="token number">3</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
document<span class="token punctuation">.</span><span class="token function">write</span><span class="token punctuation">(</span>a<span class="token punctuation">.</span><span class="token function">sort</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span>a<span class="token punctuation">,</span>b<span class="token punctuation">)</span><span class="token punctuation">{</span>
    <span class="token keyword">return</span> b<span class="token operator">-</span>a<span class="token punctuation">;</span><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">></span>
<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span></span></code></pre>
<p><strong>???</strong>这里不太懂为啥sort里传了个函数。</p>
<blockquote>
<p>搜到了解答：<br><code>arrayObject.sort(sortby</code>)如果不传参数而默认按Ascii编码字母序排序。否则传入的就是<strong>比较函数</strong>。<br>比较函数应该具有两个参数 a 和 b，其返回值如下：</p>
</blockquote>
<blockquote>
<p>若 a 小于 b，在排序后的数组中 a 应该出现在 b 之前，则返回一个小于 0 的值。<br>若 a 等于 b，则返回 0。<br>若 a 大于 b，则返回一个大于 0 的值。<br>通过调试发现默认情况下，随机参数a b的值总是a比b小。所以a-b是升序。 b-a是降序。</p>
</blockquote>
<h2 id="Math对象"><a href="#Math对象" class="headerlink" title="Math对象"></a>Math对象</h2><p>不多解释了<code>Math.round(四舍五入) Math.random(0-1随机数).max().min().abs()</code></p>
<h1 id="Js浏览器对象"><a href="#Js浏览器对象" class="headerlink" title="Js浏览器对象"></a>Js浏览器对象</h1><h2 id="window对象"><a href="#window对象" class="headerlink" title="window对象"></a>window对象</h2><p><code>window.open(,,)</code><br>可以设置打开的对象，窗口名，大小+位置<br><code>window.close()</code>关闭</p>
<p>docunment\DOM啥的都是window的对象。可缺省。</p>
<h2 id="计时器"><a href="#计时器" class="headerlink" title="计时器"></a>计时器</h2><ul>
<li><code>setInterval()</code> 间隔一定毫秒 不停地执行 指定代码<br><code>clearInterval()</code> 终止</li>
<li><p><code>settimeout()</code> 暂定一定毫秒后执行指定的代码 (就是延时执行，如果想不停执行还要递归调用。)<br><code>cleantimeout()</code></p>
<p>例子</p>
</li>
</ul>
<pre class="line-numbers language-javascript"><code class="language-javascript"><span class="token operator">&lt;</span>button id<span class="token operator">=</span><span class="token string">"btn"</span> onclick<span class="token operator">=</span><span class="token string">"stopTimer()"</span><span class="token operator">></span>停止时间<span class="token operator">&lt;</span><span class="token operator">/</span>button<span class="token operator">></span>
<span class="token operator">&lt;</span>p id<span class="token operator">=</span><span class="token string">"ptime"</span><span class="token operator">></span><span class="token operator">&lt;</span><span class="token operator">/</span>p<span class="token operator">></span>
<span class="token operator">&lt;</span>script<span class="token operator">></span>
<span class="token keyword">var</span> mytime <span class="token operator">=</span> <span class="token function">setInterval</span><span class="token punctuation">(</span><span class="token function">func</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    <span class="token function">getTime</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span><span class="token number">1000</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">function</span> <span class="token function">getTime</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    <span class="token keyword">var</span> d <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">var</span> t <span class="token operator">=</span> d<span class="token punctuation">.</span><span class="token function">toLocaleTimeString</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">"ptime"</span><span class="token punctuation">)</span><span class="token punctuation">.</span>innerHTML <span class="token operator">=</span> t<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token keyword">function</span> <span class="token function">stopTimer</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    <span class="token function">clearInterval</span><span class="token punctuation">(</span>mytime<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">></span>
<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>
<h2 id="History对象、Location对象、Screen对象"><a href="#History对象、Location对象、Screen对象" class="headerlink" title="History对象、Location对象、Screen对象"></a>History对象、Location对象、Screen对象</h2><p>不写了</p>
<h1 id="插曲"><a href="#插曲" class="headerlink" title="插曲"></a>插曲</h1><p>写这篇文章的时候。竟然一直 hexo g 报错。<br>说是文章内容的错误。</p>
<p>我整了一晚上没找着哪有问题。</p>
<p>最后<a href="https://www.aimoon.site" target="_blank" rel="noopener">强哥</a>来给删了个空格就好了。乖乖。</p>
<p>感谢强哥！</p>

            </div>
            <hr>

            

            <link rel="stylesheet" type="text/css" href="/libs/share/css/share.min.css">

<div id="article-share">
    
    <div class="social-share" data-disabled="qzone" data-wechat-qrcode-helper="<p>微信里点“发现”->“扫一扫”二维码便可查看分享。</p>"></div>
    
</div>

<script src="/libs/share/js/social-share.min.js"></script>

            <div class="reprint">
                <p>
                    <span class="reprint-tip">转载请注明: </span>
                    <a href="https://xuanshan.gitee.io" class="b-link-green">炫杉</a>
                    <i class="fa fa-angle-right fa-lg fa-fw text-color"></i>
                    <a href="/Website/HelloJs/" class="b-link-green">HelloJs</a>
                </p>
            </div>
        </div>
    </div>

    

    

    

    
    <div class="livere-card card" data-aos="fade-up">
    <!-- 来必力City版安装代码 -->
    <div id="lv-container" class="card-content" data-id="city" data-uid="MTAyMC8yOTg2My82NDI5">
        <script type="text/javascript">
            (function (d, s) {
                let j, e = d.getElementsByTagName(s)[0];
                if (typeof LivereTower === 'function') {
                    return;
                }

                j = d.createElement(s);
                j.src = 'https://cdn-city.livere.com/js/embed.dist.js';
                j.async = true;

                e.parentNode.insertBefore(j, e);
            })(document, 'script');
        </script>
        <noscript>为正常使用来必力评论功能请激活JavaScript。</noscript>
    </div>
    <!-- City版安装代码已完成 -->
</div>
    

    

<article id="prenext-posts" class="prev-next articles">
    <div class="row article-row">
        
        <div class="article col s12 m6" data-aos="fade-up">
            <div class="article-badge left-badge text-color">上一篇</div>
            <div class="card">
                <a href="/WebRTC/WebRTC01iOSDemo/">
                    <div class="card-image">
                        
                        
                        <img src="/medias/featureimages/19.jpg" class="responsive-img" alt="WebRTC01iOS_Demo">
                        
                        <span class="card-title">WebRTC01iOS_Demo</span>
                    </div>
                </a>
                <div class="card-content article-content">
                    <div class="summary">为我的WebRTC第一站做个记录吧。先了解下应用层的东西。

我发现，我这些学习笔记一点都不技术，跟我的流水账日记差不多～哈哈。管不了这么多了。我的现阶段，这个水平。写博客就是为了记录我学习的过程。大体了解WebRTC，里面涉及的东西真的～</div>
                    <div class="publish-info">
                        <span class="publish-date">
                            <i class="fa fa-clock-o fa-fw icon-date"></i>2018-08-24
                        </span>
                        <span class="publish-author">
                            
                            <i class="fa fa-bookmark fa-fw icon-category"></i>
                            
                            <a href="/categories/WebRTC/" class="post-category" target="_blank">
                                    WebRTC
                                </a>
                            
                            
                        </span>
                    </div>
                </div>
                
                <div class="card-action article-tags">
                    
                    <a href="/tags/Note/" target="_blank">
                        <span class="chip bg-color">Note</span>
                    </a>
                    
                </div>
                
            </div>
        </div>
        
        
        <div class="article col s12 m6" data-aos="fade-up">
            <div class="article-badge right-badge text-color">下一篇</div>
            <div class="card">
                <a href="/Python/Python学习遇到的坑/">
                    <div class="card-image">
                        
                        
                        <img src="/medias/featureimages/12.jpg" class="responsive-img" alt="Problems in studying Python">
                        
                        <span class="card-title">Problems in studying Python</span>
                    </div>
                </a>
                <div class="card-content article-content">
                    <div class="summary">一些杂碎问题不至于写一篇文章了。放在这收集吧。

Spyder使用IPython Console弹出绘图窗口的设置方法matplotlib 画图show()不显示图
Spyder设置（Cmd + ，）–&gt;IPython Console</div>
                    <div class="publish-info">
                            <span class="publish-date">
                                <i class="fa fa-clock-o fa-fw icon-date"></i>2018-08-06
                            </span>
                        <span class="publish-author">
                            
                            <i class="fa fa-bookmark fa-fw icon-category"></i>
                            
                            <a href="/categories/Python/" class="post-category" target="_blank">
                                    Python
                                </a>
                            
                            
                        </span>
                    </div>
                </div>
                
                <div class="card-action article-tags">
                    
                    <a href="/tags/Python/" target="_blank">
                        <span class="chip bg-color">Python</span>
                    </a>
                    
                </div>
                
            </div>
        </div>
        
    </div>
</article>
</div>
    </div>
    <div class="col l3 hide-on-med-and-down">
        <div class="toc-widget">
            <div class="toc-title">目录</div>
            <div id="toc-content">

            </div>
        </div>
    </div>
</div>

<script src="/libs/tocbot/tocbot.min.js"></script>
<script>
    $(function () {
        tocbot.init({
            tocSelector: '#toc-content',
            contentSelector: '#articleContent',
            headingSelector: 'h1,h2, h3, h4'
        });

        // modify the toc link href to support Chinese.
        let i = 0;
        let tocHeading = 'toc-heading-';
        $('#toc-content a').each(function () {
            $(this).attr('href', '#' + tocHeading + (++i));
        });

        // modify the heading title id to support Chinese.
        i = 0;
        $('#articleContent').children('h1,h2, h3, h4').each(function () {
            $(this).attr('id', tocHeading + (++i));
        });

        // Set scroll toc fixed.
        let tocHeight = parseInt($(window).height() * 0.4 - 64);
        let $tocWidget = $('.toc-widget');
        $(window).scroll(function () {
            let scroll = $(window).scrollTop();
            /* add post toc fixed. */
            if (scroll > tocHeight) {
                $tocWidget.addClass('toc-fixed');
            } else {
                $tocWidget.removeClass('toc-fixed');
            }
        });
    });
</script>
    

</main>

<footer class="page-footer bg-color">
    <div class="container row center-align">
        <div class="col s12 m8 l8 copy-right">
            &copy;<a href="https://o--o.win" target="_blank">炫杉2018</a> 
            <a href="https://hexo.io/" target="_blank">Hexo</a> 强力驱动
              主题 <a href="https://github.com/blinkfox/hexo-theme-matery" target="_blank">matery</a>        </div>
        <div class="col s12 m4 l4 social-link"><a href="https://github.com/ixsim" class="tooltipped" target="_blank" data-tooltip="访问我的GitHub" data-position="top" data-delay="50">
    <i class="fa fa-github"></i>
</a>

<a href="mailto:chenjiayin1990@163.com" class="tooltipped" target="_blank" data-tooltip="邮件:chinalixs@qq.com" data-position="top" data-delay="50">
    <i class="fa fa-envelope-open"></i>
</a>

<a href="http://wpa.qq.com/msgrd?v=3&uin=6956820&site=qq&menu=yes" class="tooltipped" data-tooltip="QQ: 6956820" data-position="top" data-delay="50">
    <i class="fa fa-qq"></i>
</a>
</div>
    </div>
</footer>

<div class="progress-bar"></div>


<!-- 搜索遮罩框 -->
<div id="searchModal" class="modal">
    <div class="modal-content">
        <div class="search-header">
            <span class="title">搜索</span>
            <input type="search" id="searchInput" name="s" placeholder="请输入搜索的关键字" class="search-input" autofocus>
        </div>
        <div id="searchResult"></div>
    </div>
</div>

<script src="/js/search.js"></script>
<script type="text/javascript">
    searchFunc("/" + "search.xml", 'searchInput', 'searchResult');
</script>
<!-- 回到顶部按钮 -->
<div id="backTop" class="top-scroll">
    <a class="btn-floating btn-large waves-effect waves-light" href="#!">
        <i class="fa fa-angle-up"></i>
    </a>
</div>


<script src="/libs/materialize/js/materialize.min.js"></script>
<script src="/libs/masonry/masonry.pkgd.min.js"></script>
<script src="/libs/aos/aos.js"></script>
<script src="/libs/scrollprogress/scrollProgress.min.js"></script>
<script src="/libs/lightGallery/js/lightgallery-all.min.js"></script>
<script src="/js/matery.js"></script>
</body>
</html>